<template>
  <div>
      我是新闻页面
      <h1>声明是方式进行params路由传参</h1>
      <router-link to="/list/我是声明第一个参数">第一种方式 了解</router-link>
      
      <!-- :to="{name:'你要去的路由的规则上name的值' ，parmas:{key:val}}" -->
      <router-link :to="{name:'List',params:{xiaoming:'我是声明第2个参数'}}">第2种方式 推荐</router-link>
  
    <h1>编程是方式进行params路由传参</h1>
    <button @click="fun()">点我使用编程式进行动态路由传参</button>
    <hr>

    <h1>使用声明式的方式进行query传参</h1>
    <router-link :to="{name:'Querylist',query:{xiaohong:'我是声明式方式进行的query传参'}}">使用声明式的方式进行query传参</router-link>
    </div>
</template>

<script>
export default {
    methods:{
        fun(){
            this.$router.push({name:'List',params:{xiaoming:'我是编程式传参'}})
        }
    }
}
</script>

<style>

</style>